<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<head >
    <title>ssss</title>
    <style type="text/css">
      #picDiv
        {
        margin:8px auto 4px auto;
        border:1px solid #666666;
        padding:0;
        width:380px;
        height:400px;
        overflow:hidden;
        position:relative;
        cursor:move;
        }
		.picthumb{
		margin:8px auto 4px auto;
		width:380px;
		height:148px;
		position:relative;
		
		}
		.picthumbcontent{
			position:relative;
			 white-space: nowrap;
			box-sizing: border-box;
			margin-left:20px;
			margin-right:20px;
			max-width: 360px;
			overflow:hidden;
			
		}
		.picthumb ul{
		transition:all .5s ease;
		  list-style-type:none;
		  margin:0;
		         white-space: nowrap;
		  padding:0;
		      box-sizing: border-box;
			  display:block;
		  transform: translate3d(0px, 0px, 0px);
		}
		
		.picthumb ul li{
		  display:inline-block;
		  padding:2px;
		  cursor:pointer;
		  border: 2px solid #fff;
		}
		.picthumb ul:after{
		  clear:both;
		}
		.picthumb ul li.cur{
		    border: 2px solid black !important;
		}
		.picthumb ul li:hover{
		    border: 2px solid #ffa128;
		}
 .jppicVisualArea{
    width:150px;
	height:150px;
	margin:100px auto;
	
 }
 .jph{
	position:absolute;
	z-index:3;
	width:20px;
	height:20px;
	display:block;
	background:#f00;
	margin-top:-10px;
	top:50%;
 }
 .jphol{
	left:0px;
 }
 .jphor{
	right:0px;
 }
 .picthumb a{text-decoration:none;}
     .jpdragAble
        {
			width:100px;
            position: absolute;
            cursor: move;
        }
    </style>
 
    <script type="text/javascript" src="jpdrag.js"></script>
 <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div id="picDiv" >
	<img src="3.jpg" class="mainImage" style="position:absolute;width:100%;" />
	<div class="jppicVisualArea">
        <img id="pic"  class="jpdragAble" alt="头像" src="2.jpg" />
		<img   class="jpdragAble" alt="头像" src="2.jpg" />
		
    </div>
    </div>
	<div style="text-align:center;"><input id="undo" type="button" value="undo" /><input id="redo" type="button" value="redo" /></div>
    <div class="picthumb">
	<a class="jph jphol" href="javascript:void(0)"></a>
	<div class="picthumbcontent">
	<ul>
	<li><img src="3.jpg" width="100" /></li>
	<li class="cur"><img src="3.jpg" width="100" /></li>
	<li><img src="2.jpg" width="100" /></li>
	<li><img src="2.jpg" width="100" /></li>
	<li><img src="3.jpg" width="100" /></li>
	</ul>
	</div>
	<a class="jph jphor" href="javascript:void(0)"></a>
	</div>
	<script>
	$(document).ready(function(){
	jp("picDiv").dragAble({
	picVisualArea:"jppicVisualArea",  //可视区域的class名
	dragAble:"jpdragAble",  //class名，贴图
	redo:"redo",  //id值，重做
	undo:"undo",   //id值 撤销
 mup:function(data){   //完成所有操作，可以ajax提交了
    //console.log(data);
 },
 initScreen:function(data){        //初始化可视区域
 //data.style.marginTop="300px";
 },
 jphol:"jphol",   //向左移动
 jphor:"jphor",  //向右移动
 picthumbcontent:"picthumbcontent" //缩略图列表包裹
 });
	});
 
	</script>
</body>
</html>